<!--职称申报-->
<template>
  <default-layout>
    <header-back text="职称申报" slot="header"></header-back>
    <div slot="main">
      <div class="form-list">
        <div class="form-list-item">
          <span class="label">姓名：</span>
          <span class="content">{{userInfo.aac003}}</span>
        </div>
        <div class="form-list-item">
          <span class="label">身份证号：</span>
          <span class="content">{{userInfo.idCard}}</span>
        </div>
        <div class="form-list-item">
          <span class="label">档案号：</span>
          <span class="content">{{userInfo.archiveCode}}</span>
        </div>
      </div>
      <div class="form">
        <yd-cell-group>
          <yd-cell-item>
            <span slot="left" class="label required">手机号：</span>
            <xf-input
                    slot="right"
                    :valid="[{required: true, msg: '请填写手机号'}, {reg: $regex.phone, msg: '手机号格式不正确'}]"
                    v-model="form.contactNumber"
                    ref="contactNumber"
                    placeholder="请填写联系电话"></xf-input>
          </yd-cell-item>
          <yd-cell-item>
            <span slot="left" class="label required">职称类别：</span>
            <xf-picker
                    :valid="[{required: true, msg: '请选择申请类别'}]"
                    v-model="form.fileNO"
                    ref="fileNO"
                    :list="level1"
                    slot="right"
                    placeholder="请选择申请类别"></xf-picker>
          </yd-cell-item>
          <yd-cell-item v-if="form.fileNO">
            <span slot="left" class="label required">职称级别：</span>
            <xf-picker
                    :valid="[{required: true, msg: '请选择职称级别'}]"
                    v-model="form.level"
                    ref="level"
                    :list="level2"
                    slot="right"
                    placeholder="请选择职称级别"></xf-picker>
          </yd-cell-item>
          <yd-cell-item>
            <span slot="left" class="label required">职称系列：</span>
            <xf-picker
              :valid="[{required: true, msg: '请选择职称系列'}]"
              v-model="form.series"
              ref="series"
              slot="right"
              :list="level3"
              placeholder="请选择职称系列"></xf-picker>
          </yd-cell-item>
          <yd-cell-item v-if="form.series">
            <span slot="left" class="label required">职称专业：</span>
            <xf-picker
                    placeholder="请选择专业"
                    :list="level4"
                    v-model="form.major"
                    ref="major"
                    :valid="[{required: true, msg: '请选择专业'}]"
                    slot="right"></xf-picker>
          </yd-cell-item>
          <yd-cell-item v-if="form.major">
            <span slot="left" class="label required">职务：</span>
            <xf-picker
                    :valid="[{required: true, msg: '请选择职务'}]"
                    v-model="form.post"
                    ref="post"
                    slot="right"
                    :list="level5"
                    placeholder="请选择职务"></xf-picker>
          </yd-cell-item>
          <yd-cell-item>
            <span slot="left" class="label required">申报时间：</span>
            <xf-date-picker
              v-model="form.date"
              :valid="[{required: true, msg: '请选择申报时间'}]"
              ref="date"
              slot="right"
              placeholder="请选择申报时间"></xf-date-picker>
          </yd-cell-item>
        </yd-cell-group>
        <div class="next">
          <mt-button size="large" type="primary" @click="onSubmit">下一步</mt-button>
        </div>
      </div>
    </div>
  </default-layout>
</template>
<script>
  import HeaderBack from '../../../components/header-back/header-back.vue'
  import XfInput from '../../../components/xf-input/xf-input.vue'
  import XfRadio from '../../../components/xf-radio/xf-radio.vue'
  import XfPicker from '../../../components/xf-picker/xf-picker.vue'
  import XfMulti from '../../../components/xf-multi/xf-multi.vue'
  import XfDatePicker from '../../../components/xf-date-picker/xf-date-picker.vue'
  import DefaultLayout from '../../../layouts/default-layout/default-layout'
  import {getTitleType} from '../../../common/js/dictionaries'
  import {validate, echo, parse} from '../../../common/js/util'
  import {STORAGE_TYPE} from '../../../common/js/config'
  import {mapGetters} from 'vuex'
  export default {
    components: {
      DefaultLayout,
      XfDatePicker,
      XfMulti,
      XfPicker,
      XfRadio,
      XfInput,
      HeaderBack
    },
    data() {
      return {
        form: {
          contactNumber: '', // 联系电话
          fileNO: '', // 申请类别
          level: '', // 级别
          series: '', // 系列
          major: '', // 专业
          post: '', // 职务
          date: '' // 时间
        },
        list: []
      }
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ]),
      level1: {
        get() {
          const arr = []
          this.list.forEach(item => {
            if (Number(item.pid) === 0) {
              arr.push(item)
            }
          })
          return arr
        }
      },
      level2: {
        get() {
          const arr = []
          this.list.forEach(item => {
            if (Number(this.form.fileNO) === Number(item.pid)) {
              arr.push(item)
            }
          })
          return arr
        }
      },
      level3: {
        get() {
          const arr = []
          this.list.forEach(item => {
            if (Number(item.pid) === 10) {
              arr.push(item)
            }
          })
          return arr
        }
      },
      level4: {
        get() {
          const arr = []
          this.list.forEach(item => {
            if (Number(this.form.series) === Number(item.pid)) {
              arr.push(item)
            }
          })
          return arr
        }
      },
      level5: {
        get() {
          const arr = []
          this.list.forEach(item => {
            if (Number(this.form.major) === Number(item.pid)) {
              arr.push(item)
            }
          })
          return arr
        }
      }
    },
    methods: {
      getDics() {
        getTitleType().then(res => {
          this.list = res
        })
      },
      onSubmit() {
        validate.bind(this)(this.form).then(() => {
          const form = Object.assign({}, this.temp, this.form)
          sessionStorage.setItem(STORAGE_TYPE.title, JSON.stringify(form))
          this.$router.replace({name: 'title2'})
        })
      }
    },
    created() {
      this.$watch('form.radio1', () => {
        this.form.radio2 = ''
      })
      this.form.contactNumber = this.userInfo.aae005
      this.temp = parse(sessionStorage.getItem(STORAGE_TYPE.title)) || {}
      echo(this.form, this.temp)
    },
    mounted () {
      this.getDics()
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../common/style/variable";

  .form {
    margin: .15rem 0 0 0;
  }
  .next{
    padding: .2rem 0 0 0;
  }
</style>
